<template>
    <div class="h-screen ">
        <UpPullLoad @trigger="loadMore">
            <div class="absolute top-0 left-0 right-0 z-10 flex items-center justify-between h-12 px-4 transition-colors" :class="{'bg-white text-gray-600 border-b':!titleVisible,'text-white':titleVisible}">
                    <div>
                        <Back class="!bg-white/0 " />
                    </div>
                    <div>
                        {{ titleVisible?'':'凡尔赛的猫咪生活' }}
                    </div>
                    <div class="flex items-center space-x-2">
                        <IClarity:dot-circle-line />
                        <Share />
                    </div>
                </div>
            <div class="sticky top-0 text-lg bg-center h-38">
                <LazyImage :src="g" />
            </div>
            <div class="relative text-gray-600 bg-white rounded-t-xl -top-4">
                <div class="p-3">
                    <div
                        class="absolute overflow-hidden -translate-x-1/2 bg-white border-2 border-white rounded-full w-14 left-1/2 h-14 -top-7">
                        <LazyImage :src="a" />
                    </div>
                    <div class="mt-6 text-lg font-bold text-center text-gray-700" ref="titleRef">凡尔赛的猫咪生活</div>
                    <div class="flex items-center justify-center py-4 space-x-4 text-base ">
                        <ICarbon:user />
                        <IMaterial-symbols:article-outline />
                        <ISystem-uicons:write />
                    </div>
                    <div>
                        <div class="flex items-center justify-between text-sm">
                            <div class="font-bold">话题内容</div>
                            <div class="flex items-center space-x-1 text-gray-500">
                                <div>共3993篇</div>
                                <div>
                                    <IMingcute:rightFill />
                                </div>
                            </div>
                        </div>
                        <div class="mt-4 mb-2 space-x-4 overflow-y-auto text-xs whitespace-nowrap">
                            <div class="py-px px-3 bg-[#fdf7ed] rounded-lg inline-block" v-for="(item, index) in topics">{{
                                item
                            }}</div>
                        </div>
                    </div>
                </div>
                <div class="border-t">
                    <Cate />
                    <Dynamic :data="dynamics" />
                </div>
            </div>
        </UpPullLoad>
    </div>
</template>
    
<script setup lang='ts'>
import g from '~/assets/banner/1.jpg'
import a from '~/assets/circle/cat1.png'
import Cate from '../components/dynamicCategory.vue'
import { useIntersectionObserver } from '@vueuse/core';
const titleRef = ref();
const dynamics = ref<any>([
    { goods: [] }, { goods: [] }, { goods: [] }
])
const titleVisible = ref(true);
const topics = [
    '#日行一善#',
    '#我们都是好朋友#',
    '#相亲日常#',
    '#日行一善#',
    '#我们都是好朋友#',
    '#相亲日常#'
]
const loadMore = ({ done }: any) => {
    setTimeout(() => {
        dynamics.value.push({
            goods: ['1', '2']
        })
        done()
    }, 200);
}

onMounted(()=>{
    useIntersectionObserver(
        titleRef.value,
        ([{isIntersecting}])=>{
            titleVisible.value = isIntersecting;
        }
    )
})
</script>
    
<style></style>